<template>
	<view class="card">
		<view class="header">
			<!-- 返回按钮 -->
			<view class="back-btn" @click="back">
				<image class="back-icon" src="/static/mine/right-black.png"></image>
			</view>
		</view>
		
		<view class="card-content">
			<!-- 基本信息部分 -->
			<view class="section basic-info">
				<view class="section-title">
					<uni-icons type="person" size="20" color="#0088ff"></uni-icons>
					<text>基本信息</text>
				</view>
				<view class="form-item">
					<text class="label">姓名</text>
					<input type="text" class="input" v-model="users.nickName" placeholder="暂无信息" :disabled="isabled" />
				</view>
				
				<view class="form-item">
					<text class="label">出生年月日</text>
					<input type="text" class="input" v-model="users.dateOfBirth" placeholder="暂无信息" :disabled="isabled" />
					<text class="error-text" v-if="ifShowAge">年龄输入错误</text>
				</view>
				
				<view class="form-item">
					<text class="label">血型</text>
					<input type="text" class="input" v-model="users.bloodType" placeholder="暂无信息" :disabled="isabled" />
				</view>
			</view>

			<!-- 紧急联系人信息 -->
			<view class="section emergency-contact">
				<view class="section-title emergency">
					<uni-icons type="phone-filled" size="20" color="#ff6b6b"></uni-icons>
					<text>紧急联系人</text>
				</view>
				<view class="form-item">
					<text class="label">联系人姓名</text>
					<input type="text" class="input" v-model="users.emergencyContactName" placeholder="暂无信息" :disabled="isabled" />
				</view>
				
				<view class="form-item">
					<text class="label">联系电话</text>
					<input type="number" class="input" v-model="users.emergencyContactPhone" placeholder="暂无信息" :disabled="isabled" />
					<text class="error-text" v-if="ifShowPhone">电话号码输入错误</text>
				</view>
			</view>

			<!-- 病史信息 -->
			<view class="section medical-history">
				<view class="section-title">
					<uni-icons type="list" size="20" color="#0088ff"></uni-icons>
					<text>病史信息</text>
				</view>
				<view class="form-item">
					<textarea class="textarea" :disabled="isabled" v-model="users.medicalHistory" placeholder="暂无信息"></textarea>
				</view>
			</view>

			<!-- 过敏药物信息 -->
			<view class="section allergies">
				<view class="section-title warning">
					<uni-icons type="warning-filled" size="20" color="#ff6b6b"></uni-icons>
					<text>过敏药物信息</text>
				</view>
				<view class="form-item">
					<textarea class="textarea warning-textarea" :disabled="isabled" v-model="users.allergies" placeholder="暂无信息"></textarea>
				</view>
			</view>
			<button class="edit-button" @click="changeCard" v-if="isabled">编辑信息</button>
				<button class="save" v-show="!isabled" @click="save">保存</button>
		</view>
	</view>
</template>

<script setup>
	import {
		reactive,
		ref,
		onMounted
	} from 'vue';

	import {
		getCardInformation,
		submitCardInfo
	} from '/api/mine/card.js'

	const receivedCardData = ref('')

	onMounted(() => {
		receivedCardData.value = uni.getStorageSync('cardInfo')
	})
	//检测格式
	const checkPhone = /^1[3-9]\d{9}$/;
	//是否可编辑
	let isabled = ref(true);
	//是否显示提示信息
	let ifShowPhone = ref(false);
	let ifShowAge = ref(false);
	let users = reactive({
		nickName: '',
		date0fBirth: '',
		bloodType: '',
		medicalHistory: '',
		allergies: '',
		emergencyContactName: '',
		emergencyContactPhone: ''
	})

	//编辑方法
	function changeCard() {
		//将文本可编辑，保存按钮显现
		isabled.value = false;
	}
	//保存
	function save() {
		if (users != null) {
			//检验年龄是否合格
			let age = parseInt(users.age);
			if (age < 0 || age > 150) {
				ifShowAge.value = true;
				isabled.value = false;
			} else {
				ifShowAge.value = false;
			}
			//检验电话号码格式是否正确
			if (!checkPhone.test(users.emergencyContactPhone)) {
				ifShowPhone.value = true;
				isabled.value = false;
				return;
			} else {
				ifShowPhone.value = false;
			}
			// 将文本不可编辑，隐藏保存按钮
			isabled.value = true;
			const cardData=JSON.stringify(users);
			//将数据传给后端
			submitCardInfo(cardData).then(res => {
				console.log(users, '成功保存数据')
			}).catch(err => {
				console.log(err, '保存数据失败')
			})
		}
	}

	//向后端发送获取请求
	getCardInformation().then(res => {
		if (res.code === 200) {
			console.log(res, '获取后端急救卡信息')
			uni.setStorageSync('cardInfo', res.nickName, res.booldType, res.medicalHisTory, res.allergies, res
				.emergencyContactName, res.emergencyContactPhone)
			Object.assign(users, res.data);
		}
	}).catch(err => {
		console.log(err, '获取后端信息失败')
	});

	// 返回按钮
	function back() {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss">
	// 主题颜色变量
	$primary-gradient: linear-gradient(135deg, #0088ff, #0055ff);
	$secondary-gradient: linear-gradient(135deg, #5a55ff, #aa55ff);
	$error-color: #ff6b6b;
	$success-color: #4cd964;
	$warning-color: #f0ad4e;
	$info-color: #909399;
	
	// 文字颜色
	$text-primary: #303133;
	$text-secondary: #606266;
	$text-placeholder: #909193;
	$text-light: #999999;
	
	// 背景颜色
	$bg-color: #f8f9fa;
	$bg-white: #ffffff;
	$bg-disabled: #f4f4f4;
	$border-color: #e4e7ed;
	
	// 阴影
	$shadow-sm: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	$shadow-base: 0 4rpx 20rpx rgba(0, 136, 255, 0.2);
	$shadow-lg: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);

	.card {
		min-height: 100vh;
		background-color: $bg-color;
		padding:60rpx 0rpx ;
	}

	.header {
		position: relative;
		height: 88rpx;
		// background: $primary-gradient;
		display: flex;
		align-items: center;
		justify-content: center;
		// box-shadow: $shadow-base;
		padding: 0 20rpx;
	}

	.back-btn {
		position: absolute;
		left: 30rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
	}
     .back-icon{
		 height: 60rpx ;
		 width: 60rpx;
	 }
	.title {
		font-size: 32rpx;
		color: #ffffff;
		font-weight: 500;
		text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
	}

	.save{
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: linear-gradient(to right, #D42222, #E9511F);
		color: #ffffff;
		font-size: 32rpx;
		border-radius:30rpx;
		border: none;
		margin-top: 40rpx;
		transition: all 0.3s ease;
		
		&:active {
			transform: translateY(2rpx);
			box-shadow: $shadow-sm;
		}
	}

	.card-content {
		padding: 30rpx;
	}

	.section {
		background-color: $bg-white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: $shadow-sm;
		transition: all 0.3s ease;

		&:hover {
			transform: translateY(-2rpx);
			box-shadow: $shadow-base;
		}
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 2rpx solid $border-color;

		text {
			font-size: 30rpx;
			font-weight: 600;
			color: $text-primary;
			margin-left: 12rpx;
		}
	}

	.emergency-contact {
		background: linear-gradient(to right, rgba(255, 107, 107, 0.05), rgba(255, 107, 107, 0.02));
		border: 2rpx solid rgba(255, 107, 107, 0.1);
	}

	.allergies {
		background: linear-gradient(to right, rgba(255, 107, 107, 0.05), rgba(255, 107, 107, 0.02));
		border: 2rpx solid rgba(255, 107, 107, 0.1);
	}

	.form-item {
		margin-bottom: 30rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
	}

	.label {
		display: block;
		font-size: 28rpx;
		color: $text-primary;
		margin-bottom: 16rpx;
		font-weight: 500;
	}

	.input {
		width:95%;
		height: 80rpx;
		background-color: $bg-white;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 28rpx;
		color: $text-primary;
		border: 2rpx solid $border-color;
		transition: all 0.3s ease;
		
		&:focus {
			border-color: #0088ff;
			box-shadow: 0 0 0 2rpx rgba(0, 136, 255, 0.1);
		}
		
		&:disabled {
			background-color: $bg-disabled;
			color: $text-light;
		}
	}

	.textarea {
		width: 95%;
		height: 160rpx;
		background-color: $bg-white;
		border-radius: 12rpx;
		padding: 20rpx;
		font-size: 28rpx;
		color: $text-primary;
		border: 2rpx solid $border-color;
		transition: all 0.3s ease;
		
		&:focus {
			border-color: #0088ff;
			box-shadow: 0 0 0 2rpx rgba(0, 136, 255, 0.1);
		}
		
		&:disabled {
			background-color: $bg-disabled;
			color: $text-light;
		}
	}

	.warning-textarea {
		border-color: rgba(255, 107, 107, 0.3);
		
		&:focus {
			border-color: $error-color;
			box-shadow: 0 0 0 2rpx rgba(255, 107, 107, 0.1);
		}
	}

	.error-text {
		font-size: 24rpx;
		color: $error-color;
		margin-top: 8rpx;
	}

	.time-text {
		font-size: 24rpx;
		color: $text-light;
	}

	.edit-button {
		width: 100%;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		background: $primary-gradient;
		color: #ffffff;
		font-size: 32rpx;
		border-radius:30rpx;
		border: none;
		margin-top: 40rpx;
		box-shadow: $shadow-base;
		transition: all 0.3s ease;

		&:active {
			transform: translateY(2rpx);
			box-shadow: $shadow-sm;
		}
	}
</style>